<template>
  <f7-page>
    <f7-navbar title="吉林动画学院会议室申请表"></f7-navbar>
    <f7-list inline-labels no-hairlines-md >
      <f7-list-item>
        <f7-label>名称</f7-label>
        <f7-input type="text" required :value="formContent.title" @input="formContent.title = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item>
        <f7-label>申请部门</f7-label>
        <f7-input type="select" required placeholder="Please choose..." :value="formContent.orgName"
                  @input="formContent.orgName = $event.target.value">
          <option v-for="item in orgNames" v-bind:key="item.id" v-bind:value="item.name">{{item.name}}</option>
        </f7-input>
      </f7-list-item>

      <f7-list-item>
        <f7-label>会议地点</f7-label>
        <f7-input type="select" required validate placeholder="Please choose..." :value="formContent.meetingroomName"
                  @input="formContent.meetingroomName = $event.target.value">
          <option v-for="item in meetingRooms" v-bind:key="item.id" v-bind:value="item.name">{{item.name}}</option>
        </f7-input>
      </f7-list-item>

      <f7-list-item>
        <f7-label>会议名称</f7-label>
        <f7-input type="text"  :value="formContent.meetingTopic"   @input="formContent.meetingTopic = $event.target.value"></f7-input>
      </f7-list-item>

      <f7-list-item>
        <f7-label>开始时间</f7-label>
        <f7-input type="datetime-local"   :value="formContent.beginTime" @input="formContent.beginTime = $event.target.value"></f7-input>
      </f7-list-item>
      <f7-list-item>
        <f7-label>结束时间</f7-label>
        <f7-input type="datetime-local" :value="formContent.endTime"     @input="formContent.endTime = $event.target.value"></f7-input>
      </f7-list-item>

      <f7-list-item>
        <f7-label>参与人员</f7-label>
        <f7-input type="tel"  :value="formContent.participant"   @input="formContent.participant = $event.target.value"></f7-input>
      </f7-list-item>

      <f7-list-item >
        <f7-label>宣传需求</f7-label>
        <f7-input type="select" placeholder="Please choose..."  v-bind:value="formContent.requireTypeName"    @input="formContent.requireTypeName = $event.target.value">
          <option v-for="(item,idx) in meetingRequires" v-bind:key="idx" v-bind:value="item"> {{item}} </option>
        </f7-input>
      </f7-list-item>

      <f7-list-item>
        <f7-label>主持人</f7-label>
        <f7-input type="text"  :value="formContent.host"   @input="formContent.host = $event.target.value"></f7-input>
      </f7-list-item>

      <f7-list-item>
        <f7-label>是否周历</f7-label>
        <f7-input type="select" placeholder="Please choose..." :value="formContent.host"   @input="formContent.host = $event.target.value">
          <option :value="true">是</option>
          <option :value="false">否</option>
        </f7-input>

      </f7-list-item>

    </f7-list>

    <f7-block strong>
      <f7-row>
        <f7-col width="50">
          <f7-button fill raised @click="submitApply">提交</f7-button>
        </f7-col>
        <f7-col width="50">
          <f7-button fill raised back>取消</f7-button>
        </f7-col>
      </f7-row>
    </f7-block>

    <f7-popup class="demo-popup" :opened="popOpen" @popup:closed="popOpen=false">
      <f7-page>
        <f7-navbar title="人员查询" >
          <f7-nav-right>
            <f7-link popup-close>Close</f7-link>
          </f7-nav-right>
        </f7-navbar>
        <f7-searchbar custom-search id="schr" @searchbar:search="doSearchNames"></f7-searchbar>
        <f7-list inline-labels no-hairlines-md >
          <f7-list-item v-show="nameFinder.caller == 1">
            <f7-input type="textarea" resizable :value="formContent.meetingSummaryPersonName" :disabled="true" :clear-button="true"
                      @input:clear="formContent.meetingSummaryPersonName=''; formContent.meetingSummaryPerson = ''" ></f7-input>
          </f7-list-item>
          <f7-list-item v-show="nameFinder.caller == 2">
            <f7-input type="textarea" resizable :value="formContent.importantAttendeesName" :disabled="true" :clear-button="true"
                      @input:clear="formContent.importantAttendeesName=''; formContent.importantAttendees=''" ></f7-input>
          </f7-list-item>
          <f7-list-item v-show="nameFinder.caller == 3">
            <f7-input type="textarea" resizable :value="formContent.otherAttendeesName" :disabled="true" :clear-button="true"
                      @input:clear="formContent.otherAttendeesName=''; formContent.otherAttendees='' "></f7-input>
          </f7-list-item>
        </f7-list>
        <f7-list >
          <f7-list-item radio  name="opt" v-for=" item in nameFinder.searchNames" v-bind:key="item.id" v-bind:value="item.id"
                        v-bind:title="item.name" @change="noticeSelect($event.target.value)"></f7-list-item>
        </f7-list>

      </f7-page>
    </f7-popup>


  </f7-page>
</template>

<script>
    export default {
      name: "applyMeetingRoomTable",
      data() {
        return {
          userId: sessionStorage.getItem('userId'),
          popOpen: false,
          orgNames: this.GLOBAL.orgNames,
          meetingRooms: this.GLOBAL.meetingRooms,
          meetingRequires: this.GLOBAL.meetingRequires,

          pastMemory: {},
          formContent: {
            title: "吉林动画学院会议室申请表",
            createBy: sessionStorage.getItem('userName'),
            orgName: "动画工程中心",
            orgId: 0,
            beginTime: "",
            endTime: "",

            meetingTopic: "",
            meetingroomId: 0,
            meetingroomName:"",
            host:"",
            participant:0,    // 参与人数，
            requireType:0,    // 宣传需求
            requireTypeName:"",
            weekCalander:""  // 是否周历
          },
          columnName: {
            meetingType: "meetingType",
            meetingroomName: "meetingroomName",
            orgName: "orgName",
          }
        }
      },
      created() {
        this.$f7ready((f7) => {
          let that = this;
          f7.request.setup({
            headers: {
              'AccessToken': sessionStorage.getItem('accessToken'),
              'JSESSIONID': sessionStorage.getItem('userToken'),
            }
          });
          if (that.$f7route.params.id > -1) {
            f7.request.json(that.GLOBAL.RequestAddress + '/camel/rest/meetingapplys', {
              'page': 1,
              'limit': 10,
              'jsonStr': '',
              'otherStr': '',
              'start': '0'
            }, function (result) {
              if (result.totalCount > 0) {
                for (let pm of result.data) {
                  if (pm.id == that.$f7route.params.id) {
                    that.pastMemory = pm;
                    break;
                  }
                }
                if (Object.keys(that.pastMemory).length === 0) {
                  return;
                } else {
                  that.formContent.title = that.pastMemory.title;
                  that.formContent.createBy = that.pastMemory.createBy;
                  that.formContent.createById = that.pastMemory.createById;

                  that.formContent.orgName = that.pastMemory.orgName;
                  that.formContent.orgId = that.pastMemory.orgId;

                  that.formContent.meetingAgenda = that.pastMemory.meetingAgenda;
                  that.formContent.meetingTopic = that.pastMemory.meetingTopic;

                  that.formContent.beginTime = that.pastMemory.beginTime.replace(' ', 'T');
                  that.formContent.endTime = that.pastMemory.endTime.replace(' ', 'T');

                  that.formContent.meetingType = that.pastMemory.meetingType;
                  that.meetingType = that.meetingTypeNum[that.formContent.meetingType];

                  that.formContent.meetingroomName = that.pastMemory.meetingroomName;
                  that.formContent.meetingroomId = that.pastMemory.meetingroomId;
                  that.formContent.otherAttendees = that.pastMemory.otherAttendees;
                  that.formContent.otherAttendeesName = that.pastMemory.otherAttendeesName;
                  that.formContent.importantAttendees = that.pastMemory.importantAttendees;
                  that.formContent.importantAttendeesName = that.pastMemory.importantAttendeesName;
                  that.formContent.meetingSummaryPerson = that.pastMemory.meetingSummaryPerson;
                  that.formContent.meetingSummaryPersonName = that.pastMemory.meetingSummaryPersonName;
                } ;
              }
            })
          }

        });
      },
      methods: {
        submitApply: function (event) {
          let that = this;
          let ff = that.formContent;
          let app = that.$f7;

          if(that.checkValidate() == false) {
            return ;
          }
          that.findNameById(that.columnName.orgName, that.formContent.orgName)
          that.formContent.beginTime = that.formContent.beginTime.replace('T', ' ') + ":00"
          that.formContent.endTime = that.formContent.endTime.replace('T', ' ') + ":00"
          that.findNameById(that.columnName.meetingType, "");
          that.findNameById(that.columnName.meetingroomName, that.formContent.meetingroomName);

          if (Object.keys(that.pastMemory).length === 0) {
            app.request.postJSON(that.GLOBAL.RequestAddress + '/camel/rest/meetingapplys', ff, function (result) {
              that.showAlert("提示", result.msg)
              console.log("submitApply: function (event)  123")
            }, function (err) {
              app.dialog.alert(err.msg, "提示");
              console.log("submitApply: function (event)")
            });
          } else {
            ff.id = that.pastMemory.id;
            let url = that.GLOBAL.RequestAddress + '/camel/rest/meetingapplys/' + that.pastMemory.id;
            that.putRequest(url, ff);
          }
        },
        showAlert: function (title, text) {
          let that = this;
          let app = that.$f7;
          app.dialog.alert(text, title, () => {
            that.$f7router.back();
          });
        },
        putRequest: function (url, cargo) {
          let that = this;
          fetch(url,
            {
              method: "put",
              headers: {
                "Content-Type": "application/json;charset=UTF-8",
                'AccessToken': sessionStorage.getItem('accessToken'),
                'JSESSIONID': sessionStorage.getItem('userToken'),
              },
              body: JSON.stringify(cargo)
            }).then(response => response.json())
            .then(result => {
              console.log(result)
              that.showAlert("提示", result.msg)
            }).catch(function (err) {
            console.log("Fetch错误", err)
          });
        },
        isIncludeInStr: function (longStr, item) {
          let towel = longStr.split(',');
          for(let i in towel) {
            if(i.localeCompare(item) == 0){
              return true;
              break;
            }
          }
          return false
        },
        noticeIptP: function() {
          this.nameFinder.caller = 2
        },
        noticeOthP: function(){
          this.nameFinder.caller = 3
        },
        noticeRcdP: function() {
          this.nameFinder.caller = 1
        },
        noticeSelect: function(id) {
          let that = this;
          let app = that.$f7;
          let sName = that.findUserNameById(id);
          switch(that.nameFinder.caller){
            case 1:
              that.formContent.meetingSummaryPerson =  id;
              that.formContent.meetingSummaryPersonName =  sName;
              break;
            case 2:
              if(that.isIncludeInStr(that.formContent.importantAttendeesName, sName) ) {
                break;
              }
              if (that.formContent.importantAttendees.length == 0) {
                that.formContent.importantAttendees =   id;
                that.formContent.importantAttendeesName = sName;
              }else {
                that.formContent.importantAttendees += "," +  id;
                that.formContent.importantAttendeesName += "," +  sName;
              }
              break;
            case 3:
              if(that.isIncludeInStr(that.formContent.otherAttendeesName, sName)) {
                break;
              }
              if (that.formContent.otherAttendees.length == 0) {
                that.formContent.otherAttendees =   id;
                that.formContent.otherAttendeesName = sName;
              } else {
                that.formContent.otherAttendees += "," +  id;
                that.formContent.otherAttendeesName += "," +  sName;
              }
              break;
          }
          // that.nameFinder.searchNames = [];
          app.searchbar.clear()
          that.popOpen = false;
        },
        findUserNameById: function (id) {
          let that = this;
          for (let item of that.nameFinder.searchNames) {
            if (item.id == id) {
              return item.name;
              break;
            }
          }
          return;
        },
        findNameById: function(columnName, name ) {
          let that = this;
          switch(columnName ) {
            case that.columnName.meetingType:
              for (let idx = 0; idx < that.meetingTypeNum.length; idx++) {
                let v = that.meetingTypeNum[idx];
                if(v.localeCompare(that.meetingType) == 0){
                  that.formContent.meetingType = idx;
                  console.log("break meetingType: " + that.formContent.meetingType)
                  return;
                }
                console.log("meetingType: " + v + " " + idx)
              }
              that.formContent.meetingType = 0;
              break;
            case that.columnName.orgName:
              for (let v of that.orgNames) {
                if(v.name.localeCompare(name) == 0) {
                  that.formContent.orgId = v.id;
                  that.formContent.orgName = v.name;
                  console.log("orgName: " + that.formContent.orgName)
                  return;
                }
              }
              that.formContent.orgId = 0;
              that.formContent.orgName = "";
              break;
            case that.columnName.meetingroomName:
              for (let v of that.meetingRooms) {
                that.formContent.meetingroomId = v.id;
                that.formContent.meetingroomName = v.name;
                console.log("meetingroomName: " + that.formContent.meetingroomName)
                return;
              }
              that.formContent.meetingroomId = 0;
              that.formContent.meetingroomName = "";
              break;
          }
        },
        doSearchNames: function (query) {
          let that = this;
          let app = that.$f7;
          let name = query.value
          that.nameFinder.searchNames = [];
          that.nameFinder.searchResult = [];
          if (name.length < 1) return

          app.request.json(that.GLOBAL.RequestAddress + '/camel/rest/users', {
            'page': 1,
            'limit': 10,
            'jsonStr': '{"%name%" : "' + name + '"}',
            'otherStr': '',
            'start': '0'
          }, function (result) {
            console.log("mess:" + result.totalCount)
            if (result.totalCount > 0) {
              that.nameFinder.searchNames = result.data;
            }
          });
          document.activeElement.blur();
        },
        checkValidate: function () {
          let that = this;
          let app = that.$f7;

          if(that.formContent.meetingroomName.length < 1) {
            app.dialog.alert("请填写会议地点", "提示", null);   return false
          } else if (that.formContent.meetingTopic.length < 1) {
            app.dialog.alert("请填写会议议题", "提示", null);   return false
          } else if (that.formContent.meetingAgenda.length < 1) {
            app.dialog.alert("请填写会议议程", "提示", null);   return false
          } else if(that.formContent.beginTime.length < 1) {
            app.dialog.alert("请填写开始时间", "提示", null);   return false
          } else if(that.formContent.endTime.length < 1) {
            app.dialog.alert("请填写结束时间", "提示", null);   return false
          } else if(that.meetingType.length<1 ) {
            app.dialog.alert("请填写会议类型", "提示", null);   return false
          }
          return true;
        }
      },
    }
</script>

<style scoped>

</style>
